<template>
    <div>
        <div class="rt">
                <span class="xuan" @click="tableStatus=2"><img src="http://hgh-oss.oss-cn-beijing.aliyuncs.com//static/real/images/201908/o_1dhgjl92j7qr1odqlkq18jm7qac.png" alt=""></span>
                <span class="xuan" @click="tableStatus=1"><img src="@/assets/images/icon8_25.png" alt=""></span>
                <span class="list_S" ><el-button slot="reference" @click="showSetDiv()"><img src="@/assets/images/icon9_27.png" alt="">列表显示项</el-button></span>
            </div>
            <div class="screenTable2" v-show="tableStatus == 1">
                <el-table 
      @sort-change="sortChange" 
      :default-sort="sortRule"
       @row-click="clickRow" 
       ref="singleTable" 
       :data="tableData"
        border
          highlight-current-row 
          :max-height="dsdaws" style="width: 100%">
                    <el-table-column  type="index" label="序号" width="50"> </el-table-column>
                    <template v-for="(item) in showHideList" v-if="item.isDefault" >
                      <!--:key="Math.random()"  == '功率(W)' || item.attrName == '色温色彩(K)' || item.attrName == '光通量(lm)' || item.attrName == '参考价(元)'-->
                      <el-table-column show-overflow-tooltip="true" v-if="item.orderAttr"  :prop="item.attrIndex" :label="item.attrName" width="123" 
                      sortable="custom">
                          <template slot-scope="scope">
                            <span v-if="item.attrName =='参考价(元)'">
                              <span v-if="scope.row[item.attrIndex] == null || scope.row[item.attrIndex] == '' || scope.row[item.attrIndex] == '0'">面议</span>        
                              <span v-else>
                                {{scope.row[item.attrIndex]}}
                              </span>                      
                            </span>
                            <span v-else>
                              {{scope.row[item.attrIndex]}}
                            </span>
                          </template>
                      </el-table-column>
                      <el-table-column v-else  :prop="item.attrIndex" :label="item.attrName"  >
                          <template slot-scope="scope">
                              <span style="cursor: pointer;color: #5962a3;
      font-weight: bold;" v-if="item.attrName =='品牌'" @click="brandPage(scope.row.brandId)">{{scope.row[item.attrIndex]}}</span>
                              <span v-else>
                                  
                                  <img @click.stop="viewPicture(ImgPath+scope.row[item.attrIndex])" :src="ImgPath + scope.row[item.attrIndex]" v-if="item.valType == 'image' && scope.row[item.attrIndex] != null && scope.row[item.attrIndex] != ''"  />
                                  <a :href="ImgPath + scope.row[item.attrIndex]"  v-else-if="item.valType == 'file' && scope.row[item.attrIndex] != null && scope.row[item.attrIndex] != ''"> <i  class="avatar-uploader-icon el-icon-notebook-2"></i></a>
                                  <span v-else-if="item.attrName == '效果描述' || item.attrName == '产品标签'">
                                      <el-popover placement="top" trigger="hover" width="400">
                                        {{(scope.row[item.attrIndex])}}
                                          <div slot="reference"><span id="wenzi2">{{getSubStr(scope.row[item.attrIndex])}}</span></div>
                                      </el-popover>
                                      <!-- <span :alt="scope.row[item.attrIndex]">{{getSubStr(scope.row[item.attrIndex])}}</span> -->
                                  </span>
                                  <span v-else>{{scope.row[item.attrIndex]}}</span>
                              </span>
                          </template>
                      </el-table-column>
                    </template>
                    <el-table-column  label="操作" prop="list13" width="150" fixed="right" > 
                        <template slot-scope="scope">
                            <div class="btns_S2">...</div>
                            <div class="btns_S">
                                <div class="BoxTable">
                                    <div class="BoxCell">
                                        <span class="btn2" @click.stop="contrast_single(scope.row)">
                                            <el-tooltip content="加入对比" placement="top">
                                                <img src="@/assets/images/w1.png" alt />
                                            </el-tooltip>
                                        </span>
                                        <span class="btn2" @click.stop="showDetail(scope.row.id)">
                                            <el-tooltip content="数据详情" placement="top">
                                                <img src="@/assets/images/w2.png" alt />
                                            </el-tooltip>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="screenTable" v-show="tableStatus == 2">
                <ul class="wid100">
                   <li  v-for="(item,index) in tableData" :key="index">
                        <div v-if="isListPage" class="des" @click="showDetail(item.id)">
                            <img :src="ImgPath + item.waiGuanPic" alt="" style="height:auto;width:auto">
                            <div class="btns_S">
                              <div class="BoxTable">
                                <div class="BoxCell">
                                  <span class="btn2" @click.stop="contrast_single(item)">
                                    <el-tooltip content="加入对比" placement="top">
                                      <img src="@/assets/images/jiaru_03.png" alt="">
                                    </el-tooltip>
                                  </span>
                                </div>
                              </div>
                            </div>
                        </div>
                        <div v-else class="des" @click="brandPage(item.brandId)">
                            <img :src="ImgPath + item.waiGuanPic" alt="" style="height:auto;width:auto">
                            <div class="btns_S">
                              <div class="BoxTable">
                                <div class="BoxCell">
                                  <span class="btn2"  @click.stop="contrast_single(item)">
                                    <el-tooltip content="加入对比" placement="top">
                                      <img src="@/assets/images/jiaru_03.png" alt="">
                                    </el-tooltip>
                                  </span>
                                </div>
                              </div>
                            </div>
                        </div>
                        <div class="cont">
                            <div class="font16"  @click="brandPage(item.brandId)">{{item.brandName}}</div>
                            <div class="font14"  @click="showDetail(item.id)">{{item.modelName}}</div>
                        </div>
                    </li>  
                </ul>
            </div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="request.page"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="request.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
     <el-dialog
      :visible.sync="showListShowHideSetDiv"
      v-dialogDrag
       title="列表显示项"
      custom-class="dynamic-class list_SAS">
      <div class="tp">选择设置项包含的信息</div>
      <div class="contcheck">
        <el-form>
          <el-form-item>
            <div class="cont">
              <div class="conts">
                <div style="cursor:pointer" v-for="(item,index) in showHideList" 
                  :key="index"
                  @click="changeColumn(index,item)" class="li_list">
                  <input type="checkbox" :id="'checkbox_'+index" :checked="item.isDefault ? 'checked' : ''" /><span>{{item.attrName}}</span>
                </div>
              </div>
            </div>
            <div style="clear:both" class="btn">
              <el-button
                style="width:100px;padding:10px"
                type="primary"
                @click="showListShowHideSetDiv = false"
              >确定</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    
    <!--查看图片 -->
    <el-dialog :visible.sync="showPic" v-dialogDrag>
      <span>
        <img :src="showPicUrl" />
      </span>
    </el-dialog>
    <div class="contrast_single el-message-box__wrapper" id="contrast_single"><!-- 加入对比 -->
      <div class="contrast_single_cont duibi">
        <div class="list_s">
          <ul>
              <li closable :disable-transitions="false" v-for="(item,index) in duibiList" :key="item.id">
                  <i class="el-icon-error" style="cursor:pointer;" @click="deleteDuibi(index)"></i>
                  <img :src="ImgPath+item.waiGuanPic" width="80" height="80" alt="">
              </li>
          </ul>
            <div class="list_s_s">
              <button @click="gotoPk()">开始对比</button>
              <button @click="clearDuibi()">清空列表</button>
          </div>
        </div>
        <i class="el-icon-close" @click="contrastShowHide1()"></i>
      </div>
    </div>
    </div>
</template>
<script>
import _ from "lodash";
import $ from 'jquery'
export default {
  data() {
    return {
      showPic: false, //查看图片
      showPicUrl: "", //图片地址
      dsdaws:600,
      duibiList:[],
      showHideList:[
                {
                    isDefault:true,
                    attrIndex:"waiGuanPic",
                    attrName:"灯具外观图",
                    valType:'image'
                },
                {
                    isDefault:true,
                    attrIndex:"brandName",
                    attrName:"品牌",
                },
                {
                    isDefault:true,
                    attrIndex:"modelName",
                    attrName:"灯具型号",
                },
                {
                    isDefault:true,
                    attrIndex:'lumPower',
                    attrName:'功率',
                },
                {
                    isDefault:true,
                    attrIndex:'colorTemp',
                    attrName:'色温色彩',
                },
                {
                    isDefault:true,
                    attrIndex:'lightAngle',
                    attrName:'光束角',
                },
                {
                    isDefault:true,
                    attrIndex:'guangTongLiang',
                    attrName:'光通量',
                },
                {
                    isDefault:true,
                    attrIndex:'controlType',
                    attrName:'控制方式',
                },
                {
                    isDefault:true,
                    attrIndex:'referPrice',
                    attrName:'参考价',
                }
            ],
            showShowHideButton:false,
         showListShowHideSetDiv: false,
        tableStatus:1,
        totalCount:0,
        tableData:[],
        request:{},
        duibiList:[],
        tabData:[],
      sortRule: { prop: null, order: null },
      isListPage:false,
    };
  },
  mounted(){
    this.loadShowHideList()
    this.$emit('tableOver');
    this.$nextTick(function () {
      this.dsdaws = window.innerHeight - 350;
      let self = this;
      window.onresize = function() {
          self.dsdaws = window.innerHeight - 350
      }
    })
  },
  methods: {
    
    sortChange(item) {
      console.log(item)
      //如果不排序了，就恢复到最初的状态
      if (item.order == null) {
        delete this.request.sort
        delete this.request.order
        this.pageSearch();
      } else {
        var sort = item.prop;
        if(sort == "lumTypeName"){
          sort = "lumType"
        }
        this.request.sort = sort;
        this.request.order = item.order == "ascending" ? "asc" : "desc";
        console.log(this.request.sort)
        console.log(this.request.order)
        this.pageSearch();
      }
      this.sortRule.order = item.order;
      this.sortRule.prop = item.prop;
    },
    
            getSubStr(val){
              if(val != null && val != undefined){
                
                var str = val
                if(val.length > 30){
                    str = val.substring(0,30)+"..."
                }
                return str
              }
            },
      clickRow(row){
          this.showDetail(row.id)
      },
    viewPicture(url) {
      this.showPic = true;
      this.showPicUrl = url;
    },
        handleCurrentChange(page) {
            this.request.page = page
            this.pageSearch()
        },
        handleSizeChange(pageSize){
            this.request.rows = pageSize
            this.pageSearch()
        },
        changeColumn(index,item){
          item.isDefault = !item.isDefault;
        },
      search(form,isListPage){
        this.isListPage = isListPage
            this.request = form
            this.pageSearch();
      },
        brandPage(id){
            let routeUrl = this.$router.resolve({
                path: "/brandPage?id="+id
            });
            window.open(routeUrl.href, '_blank');
        },
      pageSearch(){
            let self = this
            this.$http.postObj('/api/banner/stlamps/pageJson',this.request,function(res){
                if(res != null && res.success && res.data != null){
                  self.tableData = res.data.rows
                  self.tabData = res.data.rows
                  self.totalCount = res.data.total
                }else{
                  self.tableData = []
                  self.totalCount = 0
                }
            })
      },
      showSetDiv() {
      this.showListShowHideSetDiv = true;
    },
    loadShowHideList(){
        let self = this
        this.$http.get('/api/banner/stlamps/attributes',{},function(res){
            if(res.success){
                self.showHideList = res.data
            }
        })
    },
        //废弃 根据灯具类型变化
        searchShowHideList(flag){
            this.showShowHideButton = flag
            if(flag){

              let self = this
              if(this.request.lumTypes != null && this.request.lumTypes != ''){
                  this.$http.get('/api/banner/stlamps/attributes/'+this.request.lumTypes,{},function(res){
                      if(res.success){
                          self.showHideList = res.data
                      }
                  })
              }
            }else{
               this.showHideList =[
                  {
                      isDefault:true,
                      attrIndex:"waiGuanPic",
                      attrName:"灯具外观图",
                  },
                  {
                      isDefault:true,
                      attrIndex:"brandId",
                      attrName:"品牌ID",
                  },
                  {
                      isDefault:true,
                      attrIndex:"modelId",
                      attrName:"型号ID",
                  },
                  {
                      isDefault:true,
                      attrIndex:'lumType',
                      attrName:'灯具类型',
                  },
                  {
                      isDefault:true,
                      attrIndex:'lumPower',
                      attrName:'灯具功率',
                  },
                  {
                      isDefault:true,
                      attrIndex:'colorTemp',
                      attrName:'色温颜色',
                  },
                  {
                      isDefault:true,
                      attrIndex:'lightAngle',
                      attrName:'光束角',
                  },
                  {
                      isDefault:true,
                      attrIndex:'guangTongLiang',
                      attrName:'光通量',
                  },
                  {
                      isDefault:true,
                      attrIndex:'controlType',
                      attrName:'控制方式',
                  },
                  {
                      isDefault:true,
                      attrIndex:'referPrice',
                      attrName:'参考价格',
                  },
                  {
                      isDefault:true,
                      attrIndex:'isPublic',
                      attrName:'是否发布',
                  }
              ]
            }
        },
    
    contrast_single(row){
      document.getElementById("contrast_single").style.display="block";
      if(this.duibiList.length >= 6){
        this.$alert('最多只能同时对比6个', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        return
      }
      for(var i = 0;i<this.duibiList.length;i++){
        if(row.id == this.duibiList[i].id){
          return
        }
      }
      this.duibiList.push(row)
      
      console.log(this.duibiList)
    },
    contrastShowHide1(){
      document.getElementById("contrast_single").style.display="none";
    },
    clearDuibi(){
      this.duibiList=[]
      document.getElementById("contrast_single").style.display="none";
    },
    deleteDuibi(index){
      this.duibiList.splice(index,1)
    },
    gotoPk(){
      var ids = ''
      for(var i=0;i<this.duibiList.length;i++){
        ids += this.duibiList[i].id + ","
      }

      let routeData = this.$router.resolve({ path: '/productScreen/details', query: {  ids: ids} });
      window.open(routeData.href, '_blank');
    },
        showDetail(id){
             let routeUrl = this.$router.resolve({
                path: "/lampListDetails?id="+id
            });
            window.open(routeUrl.href, '_blank');
        },
  },
  watch(){
   
  }
};
</script>
<style lang="scss">
.el-table--border th.gutter:last-of-type { 
    display: table-cell!important; 
    width: 17px!important; 
}
// .el-table--border .el-table__fixed-body-wrapper{
//     top: 59px !important;
// }
.el-table__fixed,.el-table__fixed-right{
    height: 100% !important;
}
.list_SAS{
  width: 770px;
  height: auto;
  .tp{
    display: none
  }
  .el-dialog__header{
    position: relative;
    background-color: #5a63a3;
    width: 100%;
    .el-dialog__title{
      color: #fff;
    }
  }
  .el-dialog__body{
    padding: 0 0 20px;
     .contcheck .btn button{
       padding: 0;
     }
  }
  .cont{
    .title{
      font-size: 16px;
      color: #000;
      font-weight: bold;
      line-height: 1;
      margin-top: 15px;
    }
    .conts{
      display: inline-block;
      width: 100%;
    }
  }
}
.dynamic-class{
    padding: 0;
    .el-button--mini{
        top: 7px;
    }
    .tp{
        background-color: #5a63a3;
        color: #fff;
        padding: 15px 25px;
    }
    .el-icon-error{
        color: #fff;
        font-size: 20px;
    }
    .contcheck{
         width: 770px;
         padding: 2% 5% 5%;
         .tishix{
          padding: 6px 15px;
          border-radius: 3px;
          background: rgba(90, 99, 163,0.2);
         }
         .el-form-item{
           margin-bottom: 0;
         }
         .el-form-item__content{
           .li_list{
             width: 25%;
            float: left;
            margin-right: 0;
            input{
              position: relative;
              top: 2px;
              margin-right: 3px;
            }
           }
         }
        .el-checkbox-group{
           width: 100%;
            padding: 15px 25px;
            display: inline-block;
            .el-checkbox{
                width: 25%;
                float: left;
                margin-right: 0;
            }
        }
        .btn{
            padding: 0 25px;
            text-align: center;
            button{
                padding: 7px 25px;
                background-color: #5a63a3;
                border-radius: 4px;
            }
        }
    }
}
.contrast_single{
  display: none;
  position: fixed;
     min-height: 120px;
    min-width: 260px;
    height: 162px;
      bottom: 50px;
      top: auto;
      left: 50%;
      transform:translateX(-50%);
      -webkit-transform:translateX(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    .contrast_single_cont{
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    font-size: 18px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 0;
    }
    ul{
        min-height: 95px;
    }
    .duibi{
    .el-icon-close{
        position: absolute;
        font-size: 18px;
        right: 5px;
        top: 5px;
        color: #fff;
        cursor: pointer;
        background: #5a63a3;
        border-radius: 50%;

    }
    .list_s{
        display: block;
        position: relative;
        padding: 10px;
        ul{
            display:block;
            margin-bottom: 6px;
            li{
                display: inline-block;
                position: relative;
                margin: 0 6px;
                padding: 5px;
                i{
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    color: #5a63a3;
                }
            }
        }
        .list_s_s{
            display: block;
           text-align: center;
            button{
                height: 30px;
                border: 1px solid #DCDFE6;
                padding: 0 12px;
                border-radius: 3px;
                margin: 0 10px;
                cursor: pointer;
                &:first-child{
                    margin-bottom: 10px;
                }
            }
        }
    }
    
}
}
.screenTable{
  li{
    .des{
      position: relative;
      .btns_S{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 3;
        display: none;
        .btn2{
          font-size: 12px;
          line-height: 1.5em;
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 4px;
          margin: 2px;
          position: relative;
          z-index: 3;
          background: #fff;
          margin: 0 4px;
          display: inline-block
        }
      }
    }
    &:hover{
      .btns_S{
        display: block;
      }
    }
  }
}
</style>